<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>测试异步请求</h1>
<h2>等待数据....</h2>
<input type="button" value="发出请求" onclick="fn()">
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    function fn() {
        //发出异步请求
        // 发出异步请求axios.get("/test01").then(function (response) {
        //     //response代表响应对象  data属性是服务器返回的数据
        //    alert(response.data);
        // }).catch(function (err) {
        //     //err是错误对象 包含错误信息
        //     alert(err);
        // });
        //如果不写.catch  错误提示信息会在控制台中显示 f12查看
        axios.get("/test01").then(function (response) {
            //response代表响应对象  data属性是服务器返回的数据
            //alert(response.data);
            //得到h2 并展示服务器得到的数据
            let h2 = document.querySelector("h2");
            h2.innerText=response.data;
        })
    }
</script>
</body>
</html>